<template>
	<div class="addArticle">
		<h1>新增文章</h1>
		<el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="titBox demo-ruleForm">
				<el-form-item label="文章标题" prop="title">
					<el-input v-model="ruleForm.title"></el-input>
				</el-form-item>
		<!-- </el-form> -->
		<!-- <div class="titBox clear_fix">
			<div class="tit">文章标题</div>
			<el-input class="titInput" v-model="input" placeholder="请输入内容"></el-input>
		</div> -->
		<div class="starsBox">
			<div class="tit">推荐</div>
			<template class="starSelect">
			  <el-radio v-model="radioX" label="5">5星</el-radio>
			  <el-radio v-model="radioX" label="4">4星</el-radio>
			  <el-radio v-model="radioX" label="3">3星</el-radio>
			  <el-radio v-model="radioX" label="2">2星</el-radio>
			  <el-radio v-model="radioX" label="1">1星</el-radio>
			</template>
		</div>
		<!-- <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="titBox demo-ruleForm"> -->
				<el-form-item label="简介" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
		<!-- </el-form> -->
		<!-- <div class="titBox clear_fix">
			<div class="tit">简介</div>
			<el-input class="titInput" v-model="input1" placeholder="请输入内容"></el-input>
		</div> -->
		<div class="titBox clear_fix">
			<div class="tit bType">展示方式</div>
			<template class="starSelect" >
			  <el-radio-group @change="changeRadio" v-model="radios">
			    <el-radio :label="1">单图</el-radio>
			    <el-radio :label="3">三张图</el-radio>
			  </el-radio-group>
			</template>
			<span>展示类型选定后，只能替换图片</span>
			
			<el-upload
			  class="upload-demo upBtn"
			  ref="upload"
			  action=""
			  :file-list="fileList"
			  :auto-upload="false"
			  :on-change="upBtn"
			  :limit="num"
			  >
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				<div  slot="tip" v-if="remin" class="remin">请选择背景图</div>
			</el-upload>
		</div>
		
		<div class="titBox clear_fix">
			<div class="editorTit">文章详情</div>
			<div id="editor" class="editor"></div>
		</div>
		<div class="editorEr" v-if="iseditor">复文本信息不能为空</div>
		
			<div class="subBtn">
				<div class="oper">操作</div>
			
			<el-row class="btn">
  				<el-button @click="getHtml('ruleForm')" type="primary">提交</el-button>
			</el-row>
		</div>
	</el-form>
	</div>
</template>

<script>
	import Editor from 'wangeditor'
	export default{
		data(){
			return{
				input:'',
				input1:'',
				radioX:"5",
				radios:1,
				//实例化上传方法
				fileList: [],
				formData: new FormData(),
				num:1,
				imgUrl:"",
				imgUrl1:[],
				editor:new Editor('#editor'),
				ruleForm: {
					name: '',
					title:''
				},
				rules: {
					name: [{
							required: true, message: '请输入文章简介', trigger: 'blur'
					}],
					title:[{ 
						 required: true, message: '请输入文章标题', trigger: 'blur'
					}]
				},
				remin:false,
				iseditor:false
				
			}
		},
		methods:{
				//成功提醒
					message(){
							this.$notify({
							title: '成功',
							message: '这是一条成功的提示消息',
							type: 'success',
							duration:2000
						});
					},

					//失败提醒
					error(){
						this.$notify.error({
							title: '失败',
							message: '这是一条失败的提示消息',
							duration:2000
						});
					},

					

					//提交成功
					succmsg(){
						this.$message({
							message: '提交成功',
							type: 'success'
						});
					},
			//上传按钮
		      submitUpload() {
		        this.$require.post(this.$config.uploadImg,this.formData)
					.then((res)=>{
						this.$refs.upload.clearFiles();
						this.message();
						if(res.data.data.img_url!=undefined){
							this.imgUrl=res.data.data.img_url
						}else{
							this.imgUrl1=res.data.data.img_url_array
						}
						console.log(this.imgUrl1)
					})
					.catch((err)=>{
							this.error();
					})
		      },
		      
		      //提交按钮
		      getHtml(formName){
						this.$refs[formName].validate((valid) => {
							if (valid&&this.imgUrl!=""&&this.editor.txt.text()!="") {
								this.remin=false;
								this.iseditor=false;
								if(this.radios==1){
									this.$require.post(this.$config.newsList,{
										brief:this.ruleForm.name,
										cover_img_url1:this.imgUrl,
										format_content:this.editor.txt.html(),
										show_type_id:1,
										stars:this.radioX,
										title:this.ruleForm.title
									})
									.then((res)=>{
										console.log(res)
										this.$router.push({
											path:"/article/list"
										})
									})
									.catch((err)=>{
										console.log("上传失败")
									})
								}else if(this.radios==3){
									this.$require.post(this.$config.newsList,{
										brief:this.ruleForm.name,
										cover_img_url1:this.imgUrl1[0],
										cover_img_url2:this.imgUrl1[1],
										cover_img_url3:this.imgUrl1[2],
										format_content:this.editor.txt.html(),
										show_type_id:2,
										stars:this.radioX,
										title:this.ruleForm.title
									})
									.then((res)=>{
										console.log(res)
										this.$router.push({
											path:"/article/list"
										})
									})
									.catch((err)=>{
										alert("上传失败")
									})
								}else{
									alert("图片只能传一张或三张")
								}
						}else{
							this.remin=true;
							this.iseditor=true;
							this.error();
							return false;
						}
						});
		      },
		      //上传文件
		      upBtn(file,fileList){
		      	this.formData.append("files",file.raw)
		      },
		      changeRadio(){
		      	this.num=this.radios
		      }
		      
		      
		},
		mounted(){
			//实例化富编辑器
			 this.editor.customConfig.onchange= (html)=>{
	        	this.formArticle = html
	      	}
			    this.editor.customConfig.menus = [     //菜单配置
			       'head',
			       'list', // 列表
			       'justify', // 对齐方式
			       'bold',
			       'fontSize', // 字号
			       'italic',
			       'underline',
			       'image', // 插入图片
			       'foreColor', // 文字颜色
			       'undo', // 撤销
			       'redo', // 重复
						] 
					// editor.customConfig.uploadImgShowBase64 = true 
					this.editor.customConfig.uploadImgShowBase64 = true
					this.editor.create()
			  }
		}
</script>

<style lang="scss" scoped>
.addArticle{
	margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
}
.titBox{
	margin-top: 20px;
		.tit{
			float: left;
			width: 10%;
			text-align: right;
			line-height: 40px;
			margin-right: 30px;
		}
		.titInput{
			width: 70%;
			float: left;
		}
		.starSelect{
			display: flex;
			align-items: center;
		}
		.el-radio {
		    height: 40px;
		    color: #606266;
		    line-height: 40;
		    line-height: 40px;
		    cursor: pointer;
		    white-space: nowrap;
		    outline: 0;
		    margin-right: 30px;
		}
		span{
			font-size: 14px;
			color:#606266;
		}
		.editorTit{
			float: left;
			width: 10%;
			height: 300px;
			text-align: right;
			line-height: 40px;
			margin-right: 30px;
			color: #606266;
			font-weight: 700;
			font-size: 14px;
		}.editorTit:before{
			content: "*";
		    color: #f56c6c;
		    margin-right: 4px;
		}
		.editor{
			width: 80%;
			float: left;
		}
	}
.tit:before{
	    content: "*";
	    color: #f56c6c;
	    margin-right: 4px;
	}
.starsBox{
	margin-top: 20px;
	.tit{
			font-weight: 700;
			display: inline-block;
			width: 10%;
			text-align: right;
			margin-right: 30px;
			color: #606266;
			font-size: 14px;
		}
}
.bType{
	/*height: 150px;*/
	color: #606266;
		font-weight: 700;
		font-size: 14px;
}
.upBtn{
	margin-left: 130px;
	margin-top:10px;
}
.editor{
	width: 70%;
}
.subBtn{
	width: 100%;
	margin-top:20px;
	padding-bottom: 20px;
	height: 100px;
	.oper{
		float: left;
		width: 10%;
		margin-right: 30px;
		text-align: right;
	}
	.btn{
		float: left;
	}
}
.remin{
		line-height: 20px;
		font-size: 12px;
		color: #F56C6C;
	}
	.editorEr{
		text-align: center;
		font-size: 12px;
		color: #F56C6C;
	}
</style>